/* 标签选择器 */
ul {
    list-style-type: square;
}

li {
    color: blue;
}

/* 类选择器 */
.selected {
    background-color: tomato;
}

/* ID选择器 */
#six-item {
    background-color: yellow;
    color: teal;
}

/* 通配选择器 */
* {
    margin: 10px;
}

.li {
    border: 1px red solid;
}

/* 属性选择器 */
/* h2[title="biaoti-1"]{color: #39C5BB;} */
/* 存在判断 */
.text-one {
    width: 700px;
    margin: auto;
}

h2[title|="biaoti"] {
    color: #39C5BB;
    margin-left: 270px;
    margin-right: 200px;
}

[class~="text-one"] {
    border: 1px #66CCFF dashed;
}

/* 子串匹配 ^开头 $结尾 *任意位置 */
[title^="zhengwen"] {
    color: #39C5BB;
    font-size: 18px;
    text-indent: 2em;
    letter-spacing: 1em;
    width: 700px;
    margin: 10px 10px 10px 10px;
}

[title$="zhengwen"] {
    color: #66CCFF;
}

/* [title*="zhengwen"]{color: #66CCFF;}  */

/* 关系选择器 */
/* 父子：直接/任意，兄弟：邻接+，后面任意~ */
div.text-two {
    border: 1px #66CCFF dashed;
    width: 700px;
    margin: auto;
}

span.orange {
    color: orange;
    margin-left: -1px;
    margin-right: -1px;
}

div.text-two p {
    color: hsl(290deg, 40%, 70%);
    font-size: 18px;
    text-indent: 2em;
    letter-spacing: 1em;
    width: 700px;
    margin: 10px 10px 10px 10px;
}

div.text-two>p {
    color: hsl(100deg, 30%, 50%);
}

/* h2~p {
    color: red;
} */
/* 伪元素选择器 */
.text-three p::first-letter {
    font-size: 1.5em;
}

.text-three p::first-line {
    color: slateblue;
}

div.text-three {
    border: 1px #66CCFF dashed;
    width: 700px;
    margin: auto;
}

div.text-three p {
    color: hsl(290deg, 40%, 70%);
    font-size: 18px;
    text-indent: 2em;
    letter-spacing: 1em;
    width: 700px;
    margin: 10px 10px 10px 10px;
}

/* 链接伪类 */
a {
    text-decoration: none;
}

a:link {
    color: #39C5BB;
}

a:visited {
    color: #39C5BB;
}

a:focus {
    color: #66CCFF;
}

a:hover {
    color: #39C5BB;
    background-color: crimson;
    cursor: w-resize;
}

a:active {
    color: #39C5BB;
    background-color: blueviolet;
}
/* 结构伪类 */
/* div.text-five p:first-child{color: red;} */
div.text-five p:first-of-type{color: red;}
/* div.text-five p:last-child{color: blue;} */
div.text-five p:last-of-type{color: blue;}